<template>
  <el-table :data="list" style="width: 100%">
    <el-table-column label="选择" width="55">
      <template #default="scope">
        <el-checkbox
          v-model="scope.row.state"
          size="large"
          @change="checkHandle(scope.$index)"
          :disabled="show == !scope.row.state"
        />
      </template>
    </el-table-column>
    <el-table-column label="编号" width="150">
      <template #default="scope">{{ scope.row.id }}</template>
    </el-table-column>
    <el-table-column label="待办事项" width="200">
      <template #default="scope">{{ scope.row.content }}</template>
    </el-table-column>
    <el-table-column label="创建时间" width="150">
      <template #default="scope">{{ scope.row.stateDate }}</template>
    </el-table-column>
    <el-table-column label="完成时间" width="120">
      <template #default="scope">{{ scope.row.finishDate }}</template>
    </el-table-column>

    <el-table-column align="right">
      <template #default="scope">
        <el-button
          size="small"
          type="primary"
          plain
          @click="handleDelete(scope.$index, scope.row)"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { ElMessageBox } from "element-plus";
export default {
  props: {
    list: Array,
  },
  data() {
    return {
      show: false,
      list1: this.list,
    };
  },
  methods: {
    handleDelete(i) {
      ElMessageBox.confirm(" 确定要删除吗", "Warning", {
        confirmButtonText: "确定",
        cancelButtonText: "点错了",
        type: "warning",
      })
        .then(() => {
          this.$emit("handleDelete", i);
        })
        .catch(() => {});
    },
    checkHandle(i) {
      ElMessageBox.confirm(" 确定任务已经完成了吗", "Warning", {
        confirmButtonText: "确定",
        cancelButtonText: "点错了",
        type: "warning",
      })
        .then(() => {
          this.$emit("finish", i);
        })
        .catch(() => {
          this.$emit("cancer", i);
        });
    },
  },
};
</script>
